<template>
  <div id="asiderBar">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      :collapse="isCollapse"
      :router="true"

      active-text-color="#ffffff">
      <el-submenu index="1">
        <template slot="title">
          <i class="iconfont icon-mulu"></i>
          <span>成果管理</span>
        </template>
        <el-menu-item v-for="item in menuLevel2_1" :index="item.path" :key="item.path">
          <template slot="title">
            <i :class="item.iconCls"></i>
            <span>{{item.name}}</span>
          </template>
        </el-menu-item>
<!--        <el-menu-item index="/theVector">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-shiliangtu"></i>-->
<!--            <span>矢量成果</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/theText">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-qingdan"></i>-->
<!--            <span>成果清单</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/theAtlas">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-tuji"></i>-->
<!--            <span>图集成果</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/theReport">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-baogao"></i>-->
<!--            <span>研究报告</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="iconfont icon-shuju"></i>
          <span>数据备份管理</span>
        </template>
        <el-menu-item v-for="item in menuLevel2_2" :index="item.path" :key="item.path">
          <template slot="title">
            <i :class="item.iconCls"></i>
            <span>{{item.name}}</span>
          </template>
        </el-menu-item>
<!--        <el-menu-item index="/theBackupList">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-biaodanliebiao-14"></i>-->
<!--            <span> 备份列表</span>-->
<!--          </template>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/theBackupRecovery">-->
<!--          <template slot="title">-->
<!--            <i class="iconfont icon-huifu"></i>-->
<!--            <span> 备份恢复</span>-->
<!--          </template>-->

<!--        </el-menu-item>-->
        <!--        <el-menu-item index="/theBackupLog">-->
        <!--          <template slot="title">-->
        <!--            <i class="iconfont icon-rizhi"></i>-->
        <!--            <span> 备份日志</span>-->
        <!--          </template>-->
        <!--        </el-menu-item>-->
      </el-submenu>
    </el-menu>

  </div>
</template>
<script>
  export default {
    name: "leftAsideBar",
    data() {
      return{
        isCollapse:false,
        menuLevel2_1:[],
        menuLevel2_2:[]
      }
    },
    created(){
      var menuLevel2=JSON.parse(window.sessionStorage.getItem('menulevel2'))[3];
      for(let index in menuLevel2){
        if(menuLevel2[index].unit=='成果管理'){
          this.menuLevel2_1.push(menuLevel2[index])
        }else if(menuLevel2[index].unit=='数据备份管理'){
          this.menuLevel2_2.push(menuLevel2[index])
        }
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelect(key){
        console.log(key)
        this.$store.commit('dirmanage/getCurrentLink',key)
      }
    }
  }
</script>
<style scoped>
  #asiderBar{
    position: absolute;
    width: 14%;

    top: 9.5%;
    bottom: 1.5%;
    left: 1%;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 5px #acc4fe;
  }
  /deep/  .el-menu-item{
    color:#a5b1ad ;
    font-size: 16px;
    width: 80%;
    left: 10%;
  }
  /deep/.el-submenu__title {
    font-size: 16px;
  }
  /deep/ .el-collapse-item__header {
    font-size: 20px;
    padding-left: 20px;
  }
  /deep/  .el-menu{
    width: 98%;
    top:2%;
    left:2%;
    border-radius: 8px;
  }
  /deep/ .el-collapse-item__header {
    font-size: 20px;
    padding-left: 20px;
  }
  .myp{
    margin-left: 50px;
  }
  /deep/ .el-button--text{
    color: #100f0f;
    font-size: 16px;
  }
  /deep/ .active{
    color: #409EFF;
  }
  /deep/.el-submenu__title {
    font-size: 18px;
    color: #4b4e53;
    font-weight: bold;
  }
  /deep/ .el-menu-item.is-active {
    /*background: #ff8a6d !important;*/
    border-radius: 8px;
    /*margin-top:5px ;*/
    /*margin-bottom: 5px;*/
    /*margin-left: 15px;*/
    /*margin-right: 15px;*/
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3) !important;

  }


</style>
